<style>
  .message-ball {
    font-size: 20px;
    line-height: 200px;
    text-align: center;
  }

  .circle {
    transition-property: width, height, margin-left, margin-top;
    transition-duration: 2s;
    position: fixed;
    transform: translateX(-50%) translateY(-50%);
    background-color: red;
    border-radius: 50%;
  }
</style>

<body></body>
<script>
  // function showCircle(cx, cy, radius, callback) {
  //   let div = document.createElement('div')
  //   div.style.width = 0
  //   div.style.height = 0
  //   div.style.left = cx + 'px'
  //   div.style.top = cy + 'px'
  //   div.className = 'circle'
  //   document.body.append(div)

  //   setTimeout(() => {
  //     div.style.width = radius * 2 + 'px'
  //     div.style.height = radius * 2 + 'px'

  //     div.addEventListener('transitionend', function handler() {
  //       div.removeEventListener('transitionend', handler)
  //       callback(div)
  //     })
  //   }, 0)
  // }

  // showCircle(150, 150, 100, (div) => {
  //   div.classList.add('message-ball')
  //   div.append('Hello, world!')
  // })

  function showCircle(cx, cy, radius) {
    return new Promise((resolve, reject) => {
      let div = document.createElement('div')
      div.style.width = 0
      div.style.height = 0
      div.style.left = cx + 'px'
      div.style.top = cy + 'px'
      div.className = 'circle'
      document.body.append(div)

      setTimeout(() => {
        div.style.width = radius * 2 + 'px'
        div.style.height = radius * 2 + 'px'

        div.addEventListener('transitionend', function handler() {
          div.removeEventListener('transitionend', handler)
          resolve(div)
        })
      }, 0)
    })

  }

  showCircle(150, 150, 100)
    .then(div => {
      div.classList.add('message-ball')
      div.append('Hello, world!')
    })
    .catch(e => console.log(e))



  // 要求：改写showCircle成为promise函数，使以下代码可以运行同样的效果

  // showCircle(150, 150, 100).then((div) => {
  //   div.classList.add('message-ball')
  //   div.append('Hello, world!')
  // })
</script>